<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

</head>
<style>
    .print-btn{display: inline-block;*display: inline;*zoom:1;width:96px;height:50px;line-height:50px;background: #e54346;color:#fff;font-family: 'Microsoft YaHei';font-size: 18px;font-weight: bold;border:0;}
    #page .print {
        text-align: right;
        margin-top: 30px;
    }
</style>
<body style="display: flex;justify-content: center">
<link rel="stylesheet" href="res/layui.css" media="all">
<div id="page" style="width: 800px">
    <div>
        <h2 style="margin: 15px 0; text-align: center;">{{title}}</h2>
    </div>
    <div>
        <table id="table2" border=1 cellSpacing=0 cellPadding=1 width="100%">
        <thead>
        <tr>
            <th width="8%" height="50px">序号</th>
            <th width="30%">产品名称</th>
            <th>规格</th>
            <th width="10%">数量</th>
            <th width="15%">总价（元）</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p, index) in itemList" style="height: 40px">
            <td style="text-align: center;">{{index + 1}}</td>
            <td style="text-align: center">{{p.product_name}}</td>
            <td style="text-align: center">{{p.sku_name}}</td>
            <td style="text-align: center">{{p.totalamount}} {{p.totalamount ? ' 件' : ''}} </td>
            <td style="text-align: center"><span class="num">{{p.totalprice}}</span></td>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="print"><input class="layui-btn layui-btn-primary" type="button" value="打印" @click="printView();"/></div>
</div>
<script src="res/layui.js" charset="utf-8"></script>
<script src="res/vue.js"></script>
<script src="./res/axios.min.js"></script>
<script src="../../js/lib/rest.js"></script>
<script language="javascript" src='/education/jsfile/LodopFuncs.js'></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '#page',
        data: {
            routeList: [],
            curIndex: 0,
            title:'',
            routename: '',
            itemList:[]
        },
        methods: {
            post(url, param) {
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            loadData() {
                let rid = getQueryString("rid");
                this.getTableData(rid)
                let name = localStorage.getItem('route-' + rid)
                this.routename = name;
                this.title = (name||'') + ' 商品统计信息'
            },
            getTableData(routeid) {/*不分页*/
                let that = this;
                this.post('/education/admin/pages/routeList/getSkuList?routeid=' + routeid, {}).then((rs)=>{
                    console.log(rs)
                    let res = rs.data;
                    document.getElementsByTagName("title")[0].innerText = '路线详情——' + that.routename;
                    let list = res.data,row = res.totalRow
                    list.push({
                        product_name:'商品总计',
                        totalamount:'',
                        totalprice: row.price
                    })
                    list.push({
                        product_name:'运费总计',
                        totalamount:'',
                        totalprice: row.freight
                    })
                    list.push({
                        product_name:'订单合计',
                        totalamount: row.amount,
                        totalprice: row.totalprice
                    })
                    that.itemList = list
                })
            },
            printView() {
                /*window.print()*/
                let LODOP=getLodop();
                LODOP.PRINT_INIT("打印-全页");
                //let div = document.getElementsByTagName('html')[0].innerHTML
                let div = document.getElementById('page').innerHTML
                div = div.replace('<input type="button" value="打印" class="layui-btn layui-btn-primary">','')
                LODOP.ADD_PRINT_HTM(50,"5%","90%","90%",div);
                LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true);
                LODOP.PREVIEW();
            }
        }
    });
    app.loadData();
</script>
</body>
</html>